<template>
  <div class="box">
    <div class="top-box">
      <img class="bg-img" src="../assets/bg.png" alt="" />
      <div class="title-text">
        <div class="title-text-h1">
          <span>科学防护 共渡难关</span>
        </div>
        <div class="title-text-h2">
          <span>肺炎疫情实时动态播报</span>
        </div>
      </div>

      <div class="cover-cards">
        <div class="cover-tab">
          <div @click="tabChange(1)" :class="{ active: data.type === 1 }">全国疫情数据(含港澳台)</div>
          <div @click="tabChange(2)" :class="{ active: data.type === 2 }">湖北疫情数据</div>
        </div>

        <div v-if="data.chinaTotal && data.type === 1" class="cover-info">
          <div>
            <h4 class="title">境外输入</h4>
            <p class="number">{{ chinaTotal.total.input }}</p>
            <p class="tip">
              较昨日
              <span>+{{ chinaTotal.today.input }}</span>
            </p>
          </div>

          <div>
            <h4 class="title">无症状感染者</h4>
            <p class="number">{{ chinaTotal.extData.noSymptom }}</p>
            <p class="tip">
              较昨日
              <span>+{{ chinaTotal.extData.incrNoSymptom }}</span>
            </p>
          </div>
          <div>
            <h4 class="title">现有确诊</h4>
            <p class="number">
              {{
                  chinaTotal.total.confirm -
                  chinaTotal.today.dead -
                  chinaTotal.today.heal
              }}
            </p>
            <p class="tip">
              较昨日
              <span>+{{ chinaTotal.today.storeConfirm }}</span>
            </p>
          </div>
          <div>
            <h4 class="title">累计确诊</h4>
            <p class="number">{{ chinaTotal.total.confirm }}</p>
            <p class="tip">
              较昨日
              <span>+{{ chinaTotal.today.confirm }}</span>
            </p>
          </div>
          <div>
            <h4 class="title">累计死亡</h4>
            <p class="number">{{ chinaTotal.total.dead }}</p>
            <p class="tip">
              较昨日
              <span>+{{ chinaTotal.today.dead }}</span>
            </p>
          </div>
          <div>
            <h4 class="title">累计治愈</h4>
            <p class="number">{{ chinaTotal.total.heal }}</p>
            <p class="tip">
              较昨日
              <span>+{{ chinaTotal.today.heal }}</span>
            </p>
          </div>
        </div>

        <div v-if="data.hbData && data.type === 2" class="cover-info">
          <div>
            <h4 class="title">累计确诊</h4>
            <p class="number">{{ hbData.total.confirm }}</p>
            <p class="tip">
              较昨日
              <span>+{{ hbData.today.confirm }}</span>
            </p>
          </div>
          <div>
            <h4 class="title">累计死亡</h4>
            <p class="number">{{ hbData.total.dead }}</p>
            <p class="tip">
              较昨日
              <span>+{{ hbData.today.dead }}</span>
            </p>
          </div>
          <div>
            <h4 class="title">累计治愈</h4>
            <p class="number">{{ hbData.total.heal }}</p>
            <p class="tip">
              较昨日
              <span>+{{ hbData.today.heal }}</span>
            </p>
          </div>
        </div>
      </div>

    </div>

    <!-- echarts -->
    <div class="data-map content">
      <h3 class="map-title">中国疫情</h3>
      <div class="map-box">
        <div :class="data.mapType == 1 ? 'to-left' : 'to-right'" id="map"></div>
        <div :class="data.mapType == 1 ? 'to-left' : 'to-right'" id="map2"></div>
      </div>
      <div class="map-btn">
        <div @click="mapTypeChange(1)" :class="{ active: data.mapType == 1 }">现有确诊</div>
        <div @click="mapTypeChange(2)" :class="{ active: data.mapType == 2 }">累计</div>
      </div>
    </div>

    <!-- 折线echarts -->
    <div class="data-line content">
      <div class="line-box">
        <div id="newly-line"></div>
        <div id="confirm-line"></div>
        <div id="heal-line"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { onMounted, reactive, toRefs, onBeforeUnmount } from 'vue';
import { InteData, initDataFun } from '../pageJs/index';

const data = reactive(new InteData())

let nowDefiniteMap: echarts.EChartsType, 
    totalDefiniteMap: echarts.EChartsType, 
    newlyLineMap: echarts.EChartsType, 
    confirmLineMap: echarts.EChartsType,
    healLineMap: echarts.EChartsType

onMounted(() => {
  // 二，在页面加载渲染的时候执行echarts画图方法
  initDataFun(nowDefiniteMap, totalDefiniteMap, newlyLineMap, confirmLineMap, healLineMap, data)
})

const { chinaTotal, hbData } = toRefs(data)

const tabChange = (type: number) => {
  data.type = type;
}

const mapTypeChange = (type: number) => {
  data.mapType = type;
}

onBeforeUnmount(() => {
  //最后，页面组件销毁的时候，需要移除绑定的监听resize事件，否则的话，多渲染几次容易导致内存泄漏和额外CPU或GPU占用
  window.removeEventListener("resize", () => {
    nowDefiniteMap.resize();
  });

  window.removeEventListener("resize", () => {
    totalDefiniteMap.resize();
  });

  window.removeEventListener("resize", () => {
    newlyLineMap.resize();
  });

  window.removeEventListener("resize", () => {
    confirmLineMap.resize();
  });

  window.removeEventListener("resize", () => {
    healLineMap.resize();
  });
})

</script>

<style lang="scss" scoped>
@keyframes toRight {
  from {
    left: 0;
  }

  to {
    left: calc(0px - 100vw + 1rem);
  }
}

@keyframes toLeft {
  from {
    left: calc(0px - 100vw + 1rem);
  }

  to {
    left: 0;
  }
}

.top-box {
  position: relative;

  .bg-img {
    width: 100%;
  }

  .title-text {
    z-index: 2;
    color: #fff;
    position: absolute;
    top: 20px;
    left: 1rem;

    .title-text-h1 {
      font-weight: bold;
      font-size: 2rem;
      text-align: left;
    }

    .title-text-h2 {
      text-align: left;
      font-weight: bold;
      font-size: 1.5rem;
      margin-top: 10px;
    }
  }

  .cover-cards {
    top: 120px;
    position: absolute;
    background: #fff;
    border-radius: 26px;
    width: calc(100% - 4rem);
    left: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 20px rgb(0 0 0 / 10%);

    >div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;

      &.cover-tab {
        >div {
          width: 50%;
          background: #efefef;
          height: 40px;
          line-height: 40px;
          text-align: center;

          &.active {
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #fff;
          }
        }
      }

      &.cover-info {
        >div {
          width: 33%;
          text-align: center;
          margin: 10px 0;

          &:nth-child(1) {

            .number,
            span {
              color: #a31d13;
            }
          }

          &:nth-child(2) {

            .number,
            span {
              color: #ffa352;
            }
          }

          &:nth-child(3) {

            .number,
            span {
              color: #791618;
            }
          }

          &:nth-child(4) {

            .number,
            span {
              color: #e44a3d;
            }
          }

          &:nth-child(5) {

            .number,
            span {
              color: #333;
            }
          }

          &:nth-child(6) {

            .number,
            span {
              color: #34aa70;
            }
          }

          .title {
            font-size: 12px;
          }

          .number {
            font-size: 1.5rem;
            font-weight: 600;
            margin: 5px 0;
          }

          .tip {
            font-size: 12px;
          }
        }
      }
    }
  }
}

.content {
  padding: 0 2rem;
}

.data-map {
  margin-top: 140px;
  overflow: hidden;
  width: calc(100% - 4rem);

  h3 {
    display: flex;
    align-items: center;
    border-left: 8px solid #e10000;
    padding-left: 1rem;
  }
}

.map-box {
  display: flex;
  width: 200%;
}

.data-line {
  margin-top: 20px;
}

#newly-line,
#confirm-line,
#heal-line {
  height: 400px;
  width: 100%;
}

#map,
#map2 {
  height: 350px;
  width: 50%;
  animation-fill-mode: forwards;
  left: 0;
}

#map {
  margin-right: 1rem;
}

#map2 {
  margin-left: 4rem
}

.to-left {
  animation: toLeft 1s;
}

.to-right {
  animation: toRight 1s;
}

.map-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;

  >div {
    width: 45%;
    height: 40p;
    line-height: 40px;
    border: 1px solid #d2d2d2;
    box-shadow: 0 5px 7px 1px rgb(0 0 0 / 5%);
    border-radius: 5px;
    text-align: center;

    &.active {
      border-color: #ce4733;
      background-color: #fef7f7;
      color: #ce2c1e;
    }
  }
}
</style>
